<template>
  <div>
    <!--头部导航
        fixed 可以让头部div带固定定位样式
        (原理：给组件内props传入true/false)
    -->
    <div>
      <van-nav-bar fixed>
        <template v-slot:left>
          <img class="logo" src="@/assets/logo.png" alt="">
        </template>
        <template #right>
          <!--postcss 只能翻译style里的css样式代码,标签内行内样式它无法转换px转rem,所以需要自己手动算-->
          <van-icon name="search" size="0.48rem" color="#fff" @click="moveSearchPageFn"/>
        </template>
      </van-nav-bar>
    </div>
    <!--tab栏导航
        van-tabs -- 一行容器
        van-tab 每个tab栏
        v-model 数据双向绑定

        粘性布局,让滑动的时候保持在最高布局
        2. 坑：sticky参照“父级div标签”
        3. (重要) 每个van-tab代表一个标签导航，中间夹着内容，对应的下属列表内容
        4. (重要) 每个van-tab都对应自己的ArticleList(多次）
        5. 细节
          van-tab循环了很多标签导航，与之一一对应的内容列表不是上来就都创建的，默认创建当前激活导航对应列表组件
          第一次切换到对应频道时，才会创建下属的ArticleList组件->create方法
          第二次切换就是显示/隐藏切换
     -->
    <div class="main">
      <van-tabs
        v-model="channelID"
        @change="channelChangeFn"
        animated
        offset-top="1.226667rem"
        sticky>
        <van-tab :title="obj.name"
            v-for ="obj in userChannelsList"
            :key="obj.id"
            :name="obj.id"

        >
          <ArticleList :channelID="channelID"></ArticleList>
        </van-tab>
      </van-tabs>

        <!-- 编辑频道图标 -->
      <van-icon name="plus" size="0.37333334rem" class="moreChannels" @click="plusClickFn"/>
    </div>
      <!-- 频道管理弹出层 -->
      <van-popup class="channel_popup" v-model="show" get-container="body">
          <ChannelEdit
            :userList="userChannelsList"
            :unCheckList="unCheckChannelList"
            @addChannelEV="addChannelFn"
            @removeChannelEV="removeChannelFn"
            @closeEV="closeFn"
            ref="editRef"
            v-model="channelID"
          ></ChannelEdit>
        <!-- v-model = "channelID" 双向绑定,从而在子组件未进入编辑状态直接点击的时候修改data中的channelID进而修改45行的ArticleList的列表id-->
      </van-popup>
  </div>
</template>

import { Toast } from 'vant';
<script>
import { getUserChannelsAPI, getAllChannelsAPI, updateChannelsAPI, removeTheChannelAPI } from '@/api'
import { getToken } from '@/utils/token'
import ArticleList from './components/ArticleList'
import ChannelEdit from './ChannelEdit'
export default {
  data() {
    return {
      channelID: 0, // 激活时的频道id(默认频道ID为0,页面刚打开是推荐频道高亮--对应文章数据)
      userChannelsList: [], //用户选择频道列表
      allChannelsList: [], //所有频道列表
      //articleList:[] // 文章列表
      show: false //频道弹出层显示/隐藏
    };
  },
  async created () {
    // 频道列表
    const res = await getUserChannelsAPI()
    //var token=getToken()
    console.log("token",`Bearer ${getToken()}`)
    // 用户已选频道
    console.log('用户已选频道')
    this.userChannelsList = res.data.data.channels
    //this.channelChangeFn() //初始化调用获取文章列表方法
    console.log(this.userChannelsList)
    //所有频道列表
    console.log('所有频道')
    const res2 = await getAllChannelsAPI()
    this.allChannelsList = res2.data.data.channels
    console.log(this.allChannelsList)
  },
  methods:{
    // tabs切换的事件 -> 获取文章列表数据
    async channelChangeFn() {
      // 文章列表
      /* const res2 = await getAllArticleListAPI({
        channel_id: this.active, // 先默认请求推荐频道数据
        timestamp: (new Date()).getTime()
      })
      console.log(res2)
      this.articleList = res2.data.data.results */
    },
    // + 号点击事件
    plusClickFn() {
        console.log('点击事件')
        this.show = true
    },
    // 添加频道
    async addChannelFn (channelObj) {
        this.userChannelsList.push(channelObj) // 父亲添加用户频道的方法
        // 还要把最新的数组发送给后台
        // 推荐频道不能传递 - 筛选出不是推荐频道的剩下的频道对象
        const newArr = this.userChannelsList.filter(obj => obj.id != 0 )
        // 所有数组里的对象，都是同一个内存地址，影响到ChannelEdit里的对象了
        const theNewArr = newArr.map((obj, index) => {
            const newObj = { ...obj} // 拷贝(浅拷贝)
            delete newObj.name
            newObj.seq = index
            return newObj // 让map方法把新对象收集起来形成一个新数组
        })
        const res = await updateChannelsAPI({
            channels: theNewArr
        })
        console.log(res)
    },
    // 删除频道
    async removeChannelFn (channelObj) {
        let index =this.userChannelsList.findIndex(obj => obj.id == channelObj.id)
        this.userChannelsList.splice(index,1 )
        // 第一种方式：把现在用户数组的数据，再覆盖式的发给后台
        // 第二种方式： 只调用删除的接口
        const res = await removeTheChannelAPI({
            channelId: channelObj.id
        })
        // 删除接口返回状态码204(Not Content) 无返回内容
    },
    // 关闭弹出层
    closeFn() {
        this.show = false
        //父组件除了props操作子组件内容
        this.$refs.editRef.isEdit = false
    },
    // 首页 - 右上角放大镜点击事件 -> 跳转搜索页面
    moveSearchPageFn() {
        this.$router.push('/search')
    },
  },
  components: {
    ArticleList,
    ChannelEdit
  },
  //计算属性(会动态计算，当依赖数据变化了那么计算属性会重新进行动态计算)
  computed: {
     unCheckChannelList() {
          // 目标：把所有频道数组挨个对象取出，对比筛选出没有的
          console.log(this.allChannelsList)
          console.log(this.userChannelsList)
          const newArr = this.allChannelsList.filter(bigObj => {
              const index = this.userChannelsList.findIndex(smallObj => {
                  return smallObj.id === bigObj.id
              })
              //如果找到了
              if (index > -1) {
                return false
              }
              else return true
          })
          return newArr
      }
  }
};
</script>

<style scoped>
.logo {
    width: 60px;
    height: 50px;
}
.main{
  padding-top: 50px;
  /*底部在Layout/index.vue-给二级路由挂载点给了一个padding-bottom*/
}
/*// 设置 tabs 容器的样式*/
 /deep/ .van-tabs__wrap {
   padding-right: 30px;
   background-color: #fff;
 }
/*// 设置小图标的样式*/
 .moreChannels {
   position: fixed;
   top: 62px;
   right: 8px;
   z-index: 999;
 }
.channel_popup {
    width: 100vw;
    height: 100vh;
}

</style>
